<template>
  <div>
    <div class="provider-list">
      <div class="header">
        <div class="header-line1 flex-s">
          <el-button type="primary" @click="deployVideo"
            ><el-icon style="margin-right: 2px"><Plus /></el-icon
            >发布视频</el-button
          >
        </div>
      </div>
      <div class="content-table">
        <div class="video-list">
          <div
            class="video-item"
            v-for="(item, index) in state.list"
            :key="index"
          >
            <div class="top">
              <video
                v-if="item.shipin && item.shipin.length"
                :src="item.shipin[0].filePath"
                controls
              ></video>
              <p @click="deleteVideo(item)" class="delete">删除</p>
            </div>
            <div class="bottom">
              <p class="title">{{ item.zhengwenmiaoshu }}</p>
              <div class="avatar-like">
                <div class="avatar">
                  <img
                    v-if="item.touxiang && item.touxiang.length"
                    :src="item.touxiang[0].filePath"
                    alt=""
                  />
                  <span>{{ item.nicheng }}</span>
                </div>
                <div class="like">
                  <img class="like-icon" :src="like" />
                  <span>{{ item.dianzanshuliang }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <h-page
          v-if="state.total"
          v-model:curr-page="state.params.current"
          :size="state.params.size"
          :total="state.total"
          @change="GetList"
        />
        <el-dialog
          class="list-dialog"
          show-close="false"
          width="40%"
          v-model="state.show"
          center
          style="padding: 0 30px"
        >
          <el-form :model="state.form1">
            <el-form-item label="正文描述：">
              <el-input
                v-model="state.form1.zhengwenmiaoshu"
                :maxlength="500"
                type="textarea"
                :rows="8"
              ></el-input>
            </el-form-item>
            <el-form-item label="上传视频：">
              <bjz-oss
                :previewList="state.form1.shipin"
                :accept="['.mp4']"
                :size="100"
                @success="successImg"
                @remove="removeImg"
              />
            </el-form-item>
          </el-form>
          <el-form-item class="note-button-group">
            <el-button size="large" @click="state.show = false">取消</el-button>
            <el-button
              class="ml50"
              size="large"
              type="primary"
              @click="submitForm"
            >
              发布
            </el-button>
          </el-form-item>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineComponent, toRefs, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  GetVirtualUserVideoList,
  AddVirtualUserVideo,
  DeleteVirtualUserVideo,
} from "@/api/virtualUser";
import { baseMsg, elMessageTip, fDate } from "@/utils/utils";
import like from "@/assets/like.png";
const route = useRoute();
const router = useRouter();
const state = reactive({
  params: {
    current: Number(route.query.page) || 1,
    size: Number(route.query.size) || 10,
    yhNo: route.query.yhNo || "",
  },
  list: [],
  total: 0,
  show: false,
  form1: {
    yhNo: route.query.yhNo,
    shipin: [],
    zhengwenmiaoshu: "",
  },
});
const init = () => {
  if (route.query.type === "deploy") {
    state.show = true;
  }
};
const GetList = () => {
  GetVirtualUserVideoList(state.params).then((res) => {
    if (res.code == 4201) {
      state.list = res.data.records;
      state.total = res.data.total;
    }
  });
};
// 点击发布视频
const deployVideo = () => {
  state.form1 = {
    yhNo: route.query.yhNo,
    shipin: [],
    zhengwenmiaoshu: "",
  };
  state.show = true;
};
// 图片上传成功
const successImg = (res) => {
  state.form1.shipin.push(res);
};
// 上传文件删除
const removeImg = (index) => {
  state.form1.shipin.splice(index, 1);
};
// 删除视频
const deleteVideo = (params) => {
  elMessageTip({
    ok() {
      DeleteVirtualUserVideo({
        id: params.id,
      }).then((res) => {
        if (res.code == 4202) {
          baseMsg("删除成功");
          GetList();
        }
      });
    },
  });
};
// 提交
const submitForm = () => {
  AddVirtualUserVideo(state.form1).then((res) => {
    console.log(res);
    if (res.code == 4202) {
      baseMsg("发布成功");
      state.show = false;
      GetList();
    }
  });
};
watch(
  () => route.query,
  () => {
    state.params.current = Number(route.query.page) || 1;
    GetList();
  },
  { deep: true }
);
GetList();
init();
</script>
<style lang="scss" scoped>
.header-line1 {
  padding: 20px 0 0 60px;
}
.header-line2 {
  padding: 20px 10px;
}
.content {
  border: none !important;
  margin: 20px 10px;
  padding: 0 50px;
  padding-bottom: 30px;
  background-color: transparent !important;
}
.video-list {
  display: flex;
  padding: 20px 0 20px 56px;
  flex-wrap: wrap;
  .video-item {
    width: 240px;
    border: 1px solid #ccc;
    &:not(:nth-child(5n + 1)) {
      margin-left: 20px;
    }
    &:not(:nth-child(-n + 5)) {
      margin-top: 20px;
    }
    .top {
      position: relative;
      height: 288px;
      video {
        height: 240px;
        width: 100%;
      }
      .delete {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #409eff;
        &:hover {
          cursor: pointer;
        }
      }
    }
    .bottom {
      font-size: 13px;
      color: #000;
      margin: 10px;
      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
      .avatar-like {
        display: flex;
        justify-content: space-between;
        .avatar {
          margin-top: 10px;
          display: flex;
          img {
            width: 25px;
            height: 25px;
            border-radius: 50%;
          }
          span {
            line-height: 25px;
            margin-left: 3px;
            font-size: 12px;
          }
        }
        .like {
          margin-top: 10px;
          display: flex;
          .like-icon {
            width: 25px;
            height: 25px;
          }
          span {
            line-height: 25px;
            margin-left: 3px;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.note-button-group {
  .el-form-item__content {
    justify-content: center;
  }
}
.app-layout .layout-right .content > div {
  background-color: inherit !important;
}
</style>
